<template>

  <div>

    <el-card v-for="item in paperList" :key="item.id" style="margin-bottom: 10px; line-height: 30px;">

      <el-row :gutter="20">
        <el-col :span="12">
          考试时间：{{ item.createTime }}
        </el-col>

        <el-col :span="12">
          考试用时： 用时{{ item.userTime }}分钟 / 总{{ item.totalTime }}分钟
        </el-col>

        <el-col :span="12">
          考试得分：{{ item.userScore }}分<span v-if="item.hasSaq">（主观分：{{ item.userObjScore }}；客观分：{{ item.userSubjScore }}）</span>
        </el-col>

        <el-col :span="12">
          是否合格：{{ item.passed ?'是':'否' }}
        </el-col>

        <el-col :span="12">
          交卷状态：{{ item.handState_dictText }}
        </el-col>

        <el-col :span="12">
          阅卷状态：{{ item.reviewState_dictText }}
        </el-col>

        <el-col :span="12" >
          异常状态：<span :class="{'has-ex': item.exState!==0}">{{ item.exState_dictText }}</span>
        </el-col>

        <el-col :span="12">
          异常信息：{{ item.exMsg || item.exState_dictText || '无异常信息' }}
        </el-col>

        <el-col v-if="item.captures && item.captures.length > 0" :span="24">
          <div>考试截图：</div>
          <div style="padding-top: 10px">
            <image-preview :data-list="item.captures" data-key="capture">
              <template v-slot:append="scope">
                {{ scope.item.createTime }}
              </template>
            </image-preview>
          </div>
        </el-col>

        <el-col :span="24" style="padding-top: 10px">
          <el-button type="primary" size="small" icon="el-icon-view" @click="handleShowPaper(item.id)">查看试卷详情</el-button>
        </el-col>

      </el-row>

    </el-card>

  </div>

</template>

<script>

import { listPaper } from '@/api/paper/paper'
import ImagePreview from '@/components/ImagePreview'

export default {
  name: 'UserPaperList',
  components: { ImagePreview },
  props: {
    examId: {
      type: String,
      defaultValue: ''
    },
    userId: {
      type: String,
      defaultValue: ''
    }
  },

  data() {
    return {
      value1: null,
      paperList: []
    }
  },

  watch: {

    // 检测查询变化
    examId: {
      handler() {
        this.fetchPaperList()
      },
      deep: true
    },

    // 检测查询变化
    userId: {
      handler() {
        this.fetchPaperList()
      },
      deep: true
    }
  },

  created() {
    this.fetchPaperList()
  },
  methods: {

    handleShowPaper(id) {
      this.$router.push({ name: 'ReviewPaperDetail', params: { paperId: id }})
    },

    fetchPaperList() {
      listPaper(this.examId, this.userId).then(response => {
        this.paperList = response.data.records
      })
    },

    // 构建预览页面
    previewList(list) {
      if (list && list.length > 0) {
        const arr = []
        for (let i = 0; i<list.length; i++) {
          arr.push(list[i].capture)
        }
        return arr
      }
    }
  }
}
</script>

<style scoped>
.has-ex{
  color: #ff0000;
}
</style>
